<template>
  <div>
    <!-- 选择框 -->
    <div class="app_top_div">
        <div class="xm_tab">
          <tab bar-active-color="#0BA6C7" v-model="view.TabType"  active-color="#0BA6C7" :line-width="1" custom-bar-width="60px">
            <tab-item selected  @on-item-click="changeTabType(0)">我的扣分<div class="shu_line_one_px_tab"></div></tab-item>
            <tab-item  @on-item-click="changeTabType(1)">我的申诉</tab-item>
          </tab>
       </div>
    </div>
   <!--  <swiper v-model="view.TabType" :show-dots="false">
        <swiper-item >
          
        </swiper-item>
        <swiper-item >
        </swiper-item>
      </swiper> -->
   <myCheckOrder class="myCheckOrder" v-if="view.TabType==0"  ref="myCheckOrder"></myCheckOrder>

   <myAppealApply  class="myApply" v-if="view.TabType==1"  ref="myApply"></myAppealApply>
    <!--end 头部搜索 -->

  </div>
</template>

<script>
import itemService from '../../shared/service/itemService'
import orderService from '../../shared/service/orderService'
import myCheckOrder  from './myCheckOrder.vue'
import myAppealApply  from './myAppealApply.vue'
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { Tab, TabItem,  Swiper, SwiperItem  } from 'vux'

export default {
   components: {
    Tab,
    TabItem,
    myCheckOrder,
    myAppealApply,
    Swiper,
    SwiperItem
  },
  data() {
    var data =  {};

    data.view={
        TabType:0,//2是扣分
    }

    return data;
  },
  mounted() {
    weixinService.initWx(wx);
  },
  methods: {
    changeTabType(val){
        this.view.TabType=val;
    },
  }
};
</script>
<style scoped>
</style>
<style scoped>
.myCheckOrder{
    position:absolute;
    width:100%;
    top:50px;
    bottom:51px;
}
.myApply{
    position:absolute;
    width:100%;
    top:50px;
    bottom:51px;
}

/* 头的div */
.app_top_div{
      position: absolute;
      width: 100%;
      top:0;
      z-index: 100;
}
.xm_tab{
    padding: 0 10%;
    background: white;
}
.xm_tab .vux-tab .vux-tab-item{
    background: linear-gradient(180deg, #fff, #fff, rgba(229, 229, 229, 0)) bottom left no-repeat;
}
.vux-tab{
     background:#F1FBFF;
}
/* end 头的div */

</style>
